<template>
<div class="users">
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>

<el-card class="box-card">
	<el-row :gutter="20">
		 <el-col :span="6">
			 <el-input placeholder="请输入内容" class="input-with-select">
			   <el-button slot="append" icon="el-icon-search"></el-button>
			 </el-input>
		 </el-col>
		 <el-col :span="4">
			 <el-button type="primary">添加用户</el-button>
		 </el-col>
	
	</el-row>
  <el-table
    :data="UserList"
    border
    style="width: 100%">
	<el-table-column width="80px"
	  type="index"
	  label="序列"
	  >
	</el-table-column>
    <el-table-column
      prop="username"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱">
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="电话">
    </el-table-column>
	<el-table-column
	  prop="role_name"
	  label="角色">
	</el-table-column>
	<el-table-column
	  prop="mg_state"
	  label="状态">
	  <template slot-scope="scope">
		  <el-switch
		    v-model="scope.row.mg_state" @change="userSateChanged(scope.row)">
		  </el-switch>
	  </template>
	</el-table-column>
	<el-table-column>
	 <template slot-scope="scope">
		  <el-tooltip class="item" effect="dark" content="编辑角色" placement="top" :enterable="false">
		      <el-button type="primary" icon="el-icon-edit"></el-button>
		     </el-tooltip>
		<el-tooltip class="item" effect="dark" content="删除角色" placement="top" :enterable="false">
		    <el-button type="danger" icon="el-icon-delete"></el-button>
		   </el-tooltip>
		   <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
		       <el-button type="warning" icon="el-icon-setting"></el-button>
		      </el-tooltip>
	 </template>	  
	  label="操作">
	</el-table-column>
  </el-table>
     <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
         :current-page="userInfo.pagenum"
        :page-sizes="[1, 2, 3, 5]"
        :page-size="userInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
</el-card>
</div>
</template>

<script>
  export default{
	 data(){
	  return{
		  UserList:[],
		  userInfo:{
			 query:'',
			  pagenum:1,
			  pagesize:2
		  },
		  total:0,
		  state:''
	  }
	  },
	  created(){
		this.getUserList();  
	  },
	  methods:{
	  async getUserList(){
		const {data:res }= await this.$http.get("Users",{params:this.userInfo});
		console.log(res)
		if(res.meta.status==200){
		this.total=res.data.total;
		this.UserList=res.data.users;
		}else{
	    this.$message.error("获取数据失败")
		}
	  
	
	  },
	  //监测 pagesize 改变的事件
	  handleSizeChange(newSize){
		  this.userInfo.pagesize=newSize;
		  console.log(newSize)
		  this.getUserList();
	  },
	  handleCurrentChange(newPage){
		  this.userInfo.pagenum=newPage;
		  this.getUserList();
	  },
	 async userSateChanged(userInfo){
		const {data:res}=await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
		if(res.meta.status==200){
		   this.$message.success(res.meta.msg)
		}
	  }
	  }
  }
</script>

<style>
	.el-card{
		margin-top: 10px;
	}
    .el-table{
		margin-top: 20px;
	}
	.el-pagination{
		margin-top: 20px;
	}
</style>
